<template>
  <div>
    <van-dialog
      use-slot
      :showConfirmButton="false"
      @close="closeDialog"
      :title="title"
      :show="showDialog"
    >
      <div class="tips_all">
        <slot></slot>
        <div class="tips_txt" v-if="contentText">
          <rich-text :nodes="contentText"> </rich-text>
        </div>
        <div class="btns_collect">
          <div @click="errorButton" v-if="showError" class="btn_error_dialog">
            {{ errorButtonText ? errorButtonText : "取消" }}
          </div>
          <div @click="closeButton" v-if="!showError" class="btn_close_dialog">
            {{ cancelButtonText }}
          </div>
          <div @click="confirm" class="btn_sure_dialog">
            {{ confirmButtonText }}
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: "v-dialog",
  props: {
    title: {
      type: [String],
      required: false,
      default: "提示",
    },
    keyId: {
      type: [Number],
      required: false,
      default: undefined,
    },
    msgType: {
      type: [Number],
      required: false,
      default: undefined,
    },
    showDialog: {
      type: [Boolean],
      required: true,
    },
    showError: {
      type: [Boolean],
      required: false,
      default: false,
    },
    errorButtonText: {
      type: [String],
      default: "",
      required: false,
    },
    cancelButtonText: {
      type: [String],
      default: "取消",
      required: false,
    },
    confirmButtonText: {
      type: [String],
      default: "确认",
      required: false,
    },
    contentText: {
      type: [String],
      required: false,
    },
    surveyUserId: {
      type: [Number],
      required: false,
      default: 0,
    },
  },
  data() {
    return {};
  },
  methods: {
    closeDialog() {
      this.$emit("update:showDialog", false);
    },
    closeButton() {
      this.$emit("update:showDialog", false);
      this.$emit("close", "closeButton");
    },
    errorButton() {
      this.$emit("update:showDialog", false);
      this.$emit("error", "errorButton");
    },
    confirm() {
      if (this.msgType == 7 && this.surveyUserId == 0) {
        uni.navigateTo({
          url: `/pages-workbench/question/question?id=${this.keyId}`,
        });
      } else if (this.msgType == 7 && this.surveyUserId != 0) {
        uni.navigateTo({
          url: `/pages-workbench/question/answerQuestion?id=${this.surveyUserId}`,
        });
      }
      this.$emit("confirm", this.msgType);
      this.closeDialog();
    },
  },
};
</script>

<style scoped lang="scss">
.tips_all {
  width: 100%;
  padding: 24rpx 48rpx 48rpx;
  box-sizing: border-box;

  .tips_txt {
    width: 100%;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    text-align: center;
  }

  .btns_collect {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 48rpx;
  }
}

.btn_close_dialog {
  @include btn_plain(#ffffff, #333333) {
    width: 200rpx;
    height: 80rpx;
    border-radius: 40rpx;
    border: 2rpx solid #e5e5e5;
  }
}

.btn_error_dialog {
  @include btn_plain(#e95756, #ffffff) {
    width: 200rpx;
    height: 80rpx;
    border-radius: 40rpx;
    border: 2rpx solid #e95756;
  }
}

.btn_sure_dialog {
  @include btn_plain_line(
    linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
    #ffffff,
    #ff9a00
  ) {
    width: 200rpx;
    height: 80rpx;
    border-radius: 40rpx;
    margin-left: 48rpx;
  }
}
</style>